﻿//上传主程序
//var UPLOADID=0;
(function ($) {
    function uploadfile(target, opts) {
        var imgupfile = $(target).find("input:file").eq(0); //上传控件
        var ImageHideFile = $(target).find("input:hidden").eq(1); //图片隐藏域。
        var PictureIdHideFile = $(target).find("input:hidden").eq(0); //图片Id隐藏域。

        if (imgupfile.val() == "") {
            $.dialog.errorTips("请选择要上传的图片！");
            return false;
        }
        else {
            if (!checkImgType(imgupfile.val())) {
                $.dialog.errorTips("上传格式为gif、jpeg、jpg、png、bmp", '', 3);
                return false;
            }
        }

        var flag = true;
        if (imgupfile[0].files != null) {
            uploadFilesCount = imgupfile[0].files.length;
            $(imgupfile[0].files).each(function (index, item) {
                if (item.size / 1024 > opts.maxSize * 1024) {
                    flag = false;
                    return;
                }
            });
        }
        if (!flag) {
            $.dialog.errorTips("上传的图片不能超过" + opts.maxSize + "M");
            return;
        }
        //准备表当
        var myform = document.createElement("form");
        myform.action = opts.url;
        myform.method = "post";
        myform.enctype = "multipart/form-data";
        myform.style.display = "none";
        //将表单加当document上，
        document.body.appendChild(myform);  //重点
        var form = $(myform);

        var fu = imgupfile.clone(true).val(""); //先备份自身,用于提交成功后，再次附加到span中。
        var fu1 = imgupfile.appendTo(form); //然后将自身加到form中。此时form中已经有了file元素。



        //开始模拟提交表当。
        form.ajaxSubmit({
            success: function (data) {
                //var erro = $(data).find("h2 i");
                if (data == "NoFile" || data == "Error" || data == "格式不正确！") {
                    toastr['error']('格式不正确.', '');
                }

                else {
                    //文件上传成功，返回图片的路径。将路经赋给隐藏域
                    var obj = jQuery.parseJSON(data);
                    ImageHideFile.val(obj.imageUrl);
                    PictureIdHideFile.val(obj.pictureId);

                    $(target).find('.glyphicon-picture').addClass('active');
                }
                $(fu1).insertAfter($("span.glyphicon-picture", $(target)));
                form.remove();

            }
        });
    }


    //检查上传的图片格式
    function checkImgType(filename) {
        var pos = filename.lastIndexOf(".");
        var str = filename.substring(pos, filename.length)
        var str1 = str.toLowerCase();
        if (!/\.(gif|jpg|jpeg|png|bmp)$/.test(str1)) {
            return false;
        }
        return true;
    }

    function bindEvent(target, opts) {
        $('input.uploadFilebtn', $(target)).change(function () {
            uploadfile(target, opts);
        });

        //$(target).attr('uploadId',UPLOADID++);
        $(target).find('.glyphicon-picture').each(function () {
            var imSrc = $(this).parent().prev('input').val();
            if (imSrc != '') {
                $(this).addClass('active');
            }
            $(this).mouseenter(function () {
                var position = $(this).offset();
                var src = $(this).parent().prev('input').val();
                var imgstr = '<div class="lg-view-img"><img src="' + src + '"></div>';
                if (src != '') {
                    $('body').append(imgstr);
                    $('.lg-view-img').css({ 'top': position.top + 20, 'left': position.left })
                }
            });
            $(this).mouseleave(function () {
                $('.lg-view-img').remove();
            });
        });


    }

    $.fn.smallUpload = function (options, param) {
        if (typeof options == "string") {
            return $.fn.smallUpload.methods[options](this, param);
        }
        options = options || {};
        return this.each(function () {
            var opts = $.extend({}, $.fn.smallUpload.defaults, options);
            opts.view.render.call(opts.view, opts, $(this));
            bindEvent(this, opts);
        });
    };

    $.fn.smallUpload.methods = {
        getImgSrc: function (jQ) {
            return $(jQ).find('input.hiddenImgSrc').val();
        },
        getImgPid: function (jQ) {
            return $(jQ).find('input.hiddenPictureId').val();
        }
    };


    var renderView = {
        render: function (opts, container) {
            var html = [
                '<label class="col-sm-' + opts.headerWidth + ' control-label" for="">' + opts.title + '</label>',
                '<input class="hiddenPictureId" type="hidden" value="' + opts.displayId + '">',
                '<input class="hiddenImgSrc" type="hidden" value="' + opts.displayImgSrc + '"  name="' + opts.imgFieldName + '">',
                '<div class="col-sm-' + opts.dataWidth + '"><span class="glyphicon glyphicon-picture"></span><input class="file uploadFilebtn" type="file" name="_file"  />',
                '<span class="help-default">' + opts.imageDescript + '</span></div>'];
            //console.log(container);
            $(container).html(html.join(''));
        }
    };

    $.fn.smallUpload.defaults = {
        url: '/Admin/Picture/AsyncSmallUpload',
        displayImgSrc: '',
        displayId: 0,
        title: '图片：',
        imageDescript: '建议上传16px * 16px的图片',
        imgFieldName: 'Icon',
        view: renderView,
        headerWidth: 2,
        dataWidth: 4,
        maxSize: 2////M为单位

    };
})(jQuery);